<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <style>


        .tag:not(body) {
            align-items: center;
            background-color: #f5f5f5;
            border-radius: 4px;
            color: #4a4a4a;
            display: inline-flex;
            /*! font-size:.75rem; */
            height: 2em;
            justify-content: center;
            line-height: 1.5;
            padding-left: .75em;
            padding-right: .75em;
            white-space: nowrap
        }

        a.tagfirst {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            cursor: pointer;
        }

        span.tag {
            margin-left: -5px;
            margin-right: 5px;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0
        }
    </style>
</head>

<body>
<!--按钮行 -->
<div style="margin-top:5px;margin-bottom: 5px;background-color: black;padding:12px;width:1002px;">
    <a id="railwaySpecial" class="tag is-medium tagfirst"
       style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">
        铁路专有词
    </a>
    <span class="tag is-medium">r</span>
    <a class="tag is-medium tagfirst" style="color: rgb(255, 255, 255); background-color: rgb(51, 204, 153);">
        E1实体
    </a> <span class="tag is-medium">e1</span>
    <a class="tag is-medium tagfirst" style="color: rgb(255, 255, 255); background-color: rgb(255, 204, 0);">
        E2实体
    </a> <span class="tag is-medium">e2</span>
</div>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain" style="width:1024px;height:500px;">
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    //比较两个字符串是否只相差一个空格
    function compareTwoString(shortString, longString) {
        //若shortString的length更长，交换shortStirng和longString
        if (shortString.length > longString.length) {
            tempString = shortString;
            shortString = longString;
            longString = tempString;
        }
        var differentChar;
        for (i = 0; i < longString.length; i++) {
            if (shortString.charAt(i) == longString.charAt(i)) {
                continue;
            } else {
                differentChar = longString.charAt(i);
                //alert(differentChar);
                //console.log((differentChar));
                //不一样的字符是否是空格
                return differentChar == " " ? true : false;
            }
        }
        // if(i=shortString.length){
        //     differentChar=longString.charAt(longString.length);
        //     alert(differentChar);
        //     //不一样的字符是否是空格
        //     return differentChar==" "?true:false;
        // }
    }

    UE.registerUI('railwayspecial', function (editor, uiName) {
        //注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
            execCommand: function () {
                //alert('execCommand:' + uiName);
                //var te=editor.selection.getText();
                //alert(te);
                editor.execCommand('forecolor', '#FFFFFF'); //设置字体颜色
                editor.execCommand('backcolor', '#FF0000'); //设置字体背景颜色
                var spanNode = editor.selection.getStart();
                spanNode.innerHTML = spanNode.innerHTML + "<a class='delete'></a>";
                //alert(te);
                editor.selection.clearRange();
            }
        });
        //创建一个button
        var btn = new UE.ui.Button({
            //按钮的名字
            name: uiName,
            //提示
            title: uiName,
            //添加额外样式，指定icon图标，这里默认使用一个重复的icon
            cssRules: 'background-position: -500px 0;',
            //点击时执行的命令
            onclick: function () {
                //这里可以不用执行命令,做你自己的操作也可
                editor.execCommand(uiName);
            }
        });
        //没有toolbar了，所以要去掉按钮的状态反射
        //当点到编辑内容上时，按钮要做的状态反射
        // editor.addListener('selectionchange', function () {
        //     //var te=editor.selection.getText();
        //     //alert(te);
        //     var state = editor.queryCommandState(uiName);
        //     if (state == -1) {
        //         btn.setDisabled(true);
        //         btn.setChecked(false);
        //     } else {
        //         btn.setDisabled(false);
        //         btn.setChecked(state);
        //     }
        // });
        //因为你是添加button,所以需要返回这个button
        return btn;
    });
    var ue = UE.getEditor('container', {
        toolbars: [
            []
        ],
        elementPathEnabled: false,
        wordCountMsg: false,
        wordCount: false,
        enableAutoSave: false
    });
    var backspaceChar = "";
    var selectedRange;
    var contentBeforeKeydown = "", contentAfterKeyup = "", contentBeforeKeydownHtml = "", contentAfterKeyupHtml = "";
    // ue.addListener('contentchange', function () {
    //     contentAfterKeyup=ue.getContentTxt();
    //     contentAfterKeyupHtml=ue.getContent();
    //     //alert("1:"+contentBeforeKeydown+"\n"+"2:"+contentAfterKeyup);
    //     if(!compareTwoString(contentAfterKeyup,contentBeforeKeydown)){
    //         ue.setContent2(contentBeforeKeydownHtml);
    //     };
    // });
    //对编辑器的操作最好在编辑器ready之后再做
    ue.ready(function () {
        //删除toolbar
        $("#edui1_toolbarbox").remove();
        //设置编辑器的内容
        ue.setContent('hellossssss     sa<span style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">aaa<a class="delete"></a></span>bbbb');
        //获取html内容，返回: <p>hello</p>
        var html = ue.getContent();
        //获取纯文本内容，返回: hello
        contentBeforeKeydown = ue.getContentTxt();
        $('#railwaySpecial').on("click", function () {
            ue.execCommand('railwayspecial');
        });
        ue.addshortcutkey("railwayspecial", "ctrl+82");
        ue.focus();
        selectedRange = ue.selection.getNative().getRangeAt(0);


        UE.dom.domUtils.on(ue.body, "keyup", function (oEvent) {
            var oEvent = oEvent || window.oEvent;
            //获取键盘的keyCode值
            var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
            contentAfterKeyup = ue.getContentTxt();
            contentAfterKeyupHtml = ue.getContent();
            //如果是四个方向键 Crtl alt shift  直接返回true
            if (oEvent.keyCode == 37 || oEvent.keyCode == 38 || oEvent.keyCode == 39 || oEvent.keyCode == 40 ||
                oEvent.keyCode == 16 || oEvent.keyCode == 17 || oEvent.keyCode == 18) {
                oEvent.returnValue = true;
            } else if (!compareTwoString(contentAfterKeyup, contentBeforeKeydown)) {
                // //selectedRange=ue.selection.getNative().getRangeAt(0);
                // //selectedRange=selectedRange.cloneRange();
                // ue.setContent(contentBeforeKeydownHtml);
                ue.setContent(contentBeforeKeydownHtml, false, true);
                // //ue.undoManger.list.pop();
                // //ue.execCommand('undo');
                // selectedRange2=ue.selection.getNative().getRangeAt(0);
                // ue.selection.getNative().removeAllRanges();
                // //ue.selection.getNative().getRangeAt(0).endOffset=1;
                // ue.selection.getNative().addRange(selectedRange);
                oEvent.returnValue = false;
            }


            //alert("1:"+contentBeforeKeydown+"\n"+"1:"+contentAfterKeyup);

            //ue.execCommand('undo');

        });

        UE.dom.domUtils.on(ue.body, "keydown", function (oEvent) {
            var oEvent = oEvent || window.oEvent;
            //获取键盘的keyCode值
            var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
            contentBeforeKeydown = ue.getContentTxt();
            contentBeforeKeydownHtml = ue.getContent();
            //alert(oEvent.keyCode);
            //只对输入是空格和backspace和四个方向键响应，其他的键盘输入一概不响应，而且是backspace时判断前面的字符是
            //空格还是字母，如果是空格让删除，如果不是空格就不让删除。
            // if(oEvent.keyCode==32||oEvent.keyCode==37||oEvent.keyCode==38||oEvent.keyCode==39||oEvent.keyCode==40||
            // oEvent.keyCode==16||oEvent.keyCode==17||oEvent.keyCode==18){
            //     oEvent.returnValue = true;
            // }
            // else if(oEvent.keyCode==8){
            //
            //     selectedRange=ue.selection.getNative().getRangeAt(0);
            //     if(selectedRange.collapsed){
            //         startNode=selectedRange.startContainer;
            //         if(startNode.nodeType==3){
            //
            //             backspaceChar=startNode.textContent.charAt(selectedRange.startOffset-1);
            //             konggeValue=backspaceChar.charCodeAt();
            //             if(konggeValue==32||konggeValue==160){
            //                 oEvent.returnValue=true;
            //             }
            //             else{
            //                 oEvent.returnValue=false;
            //             }
            //         }
            //         else{
            //             oEvent.returnValue=true;
            //         }
            //
            //     }
            //     else{
            //         oEvent.returnValue=true;
            //     }
            //
            // }
            // else{
            //     oEvent.returnValue = false;
            // }
            //
            // //alert(nKeyCode);
            // //var aNode=ue.selection.getStart();
            // //spanNode=UE.dom.domUtils.findParentByTagName(aNode, [ "span" ] );
            // //if(spanNode!=null&&spanNode.tagName=="SPAN"){
            // //ue.focus();
            // //ue.execCommand('inserthtml',oEvent.key);
            // //var txtNode = document.createTextNode(oEvent.key);
            // //UE.dom.domUtils.insertAfter(spanNode, txtNode);
            //
            // //}
            // //ue.selection.clearRange();
            // //ue.execCommand('removeformat');
            // //oEvent.returnValue = false;
        });
        //var doc=ue.selection.getRange().document;
        $(ue.body).on("click", "a", function (event) {
            //alert($(this).text());
            var parentNode = UE.dom.domUtils.findParentByTagName(this, ["span"]);
            UE.dom.domUtils.remove(this);
            //alert(parentNode.outerHTML);
            parentNode.outerHTML = parentNode.innerText;
            //fire contentchange
            ue.fireEvent('contentchange');
        });
        //UE自带的on事件绑定不好用，改为使用jQuery的on事件绑定
        //UE.dom.domUtils.on(bt,"click",function(e){
        //e为事件对象，this为被点击元素对戏那个
        //alert(this.innerHTML);
        //var parentNode = UE.dom.domUtils.findParentByTagName(this, [ "span" ] );
        //UE.dom.domUtils.remove(this);
        //alert(parentNode.outerHTML);
        //parentNode.outerHTML=parentNode.innerText;
        //});
    });

</script>
</body>

</html>